<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li {
        list-style: none;
        margin: 10px 0;
        text-align: left;
        background-color: aliceblue;
        border-radius: 10px;
    }

    img {
        width: 70px;
        height: 70px;
        vertical-align: middle;

    }


    h1 {
        margin: 0;
    }

    .Shopping {
        width: 500px;
        height: 400px;
        margin: auto;
    }

    .Shopping>h1 {
        text-align: center;
    }

    .Shopping .yi {
        width: 100%;
        height: 50px;
        line-height: 50px;

    }

    .Shopping .yi>span {
        width: 100px;
        height: 30px;
        display: inline-block;
        text-align: center;
        line-height: 30px;
        background-color: antiquewhite;
    }

    .Shopping .er {
        width: 500px;
        height: 400px;
        margin: auto;
    }

    .Shopping .er>ul {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .Shopping .er>ul img {
        margin-left: 30px;
    }

    .Shopping .er>ul span {
        width: 50px;
        height: 30px;
    }

    .Shopping .er>ul div {
        display: inline-block;
        margin-left: 40px;
    }

    .Shopping .er>ul>li>button {
        margin-left: 50px;
    }

    .maney {
        margin-left: 100px;
    }
</style>

<body>
    <div class="Shopping">
        <h1>购物车</h1>
        <span class="all">全部商品:</span><button onclick="cl()">清空购物车</button><button onclick="fanhui()">返回商品页面</button>
        <span class="maney">总价</span>
        <div class="yi">
            <input type="checkbox" class="select">全选
            <span>商品</span>
            <span>单价</span>
            <span>数量</span>
            <span>作用</span>
        </div>
        <div class="er">
            <ul>
                <li class="gw">
                    <input type="checkbox">
                    <img src="" alt="">
                    <span>名字</span>
                    <span>￥5999</span>
                    <div>
                        <button>-</button>
                        <span>1</span>
                        <button>+</button>
                    </div><br>
                    <button>删除</button>
                </li>
            </ul>
        </div>
    </div>
    <script>
        //数据
        var arr = JSON.parse(localStorage.getItem('gwshuju'))
        //获取DOM
        var select = document.querySelector('.select')
        var ma = document.querySelector('.maney')
        //渲染
        function xuanran() {
            var gw_shu = document.querySelector('.er ul')
            gw_shu.innerHTML = ''
            arr.forEach(item => {
                gw_shu.innerHTML += `
                  <li class="gw">
                        <input type="checkbox" ${item.is ? 'checked' : ''} onclick="zongjia(${item.id})">
                        <img src="${item.img}" alt="">
                        <span>${item.name}</span>
                        <span>￥${item.price}</span>
                        <div>
                            <button onclick="jian(${item.id})">-</button>
                            <span>${item.shul}</span>
                            <button onclick="jia(${item.id})">+</button>
                        </div>
                        <button onclick="rem(${item.id})">删除</button>
                    </li>`
            })
        } xuanran()
        //全部商品
        function quan() {
            var all = document.querySelector('.all')
            var al = 0
            arr.forEach(item => {
                al += item.shul
            })
            all.innerHTML = `全部商品：${al}种`
        } quan()
        //删除
        function rem(id) {
            var a = arr.findIndex(item => item.id == id)
            arr.splice(a, 1)
            xuanran()
            quan()
            jiesuan()
        }
        //全选
        function qx() {
            var select_gw = document.querySelectorAll('li input')
            select.addEventListener('input', () => {
                select_gw.forEach(item => {
                    if (select.checked) {
                        item.checked = true
                    } else {
                        item.checked = false
                    }
                })
            })
            jiesuan()
        } qx()
        //清空购物车
        function cl() {
            console.log(111);

            arr = []
            xuanran()
            quan()
            jiesuan()
        }
        //加
        function jia(id) {
            var a = arr.find(item => item.id == id)
            arr.forEach(item1 => {
                if (item1.id == a.id && item1.shul >= 1) {
                    a.shul++
                    item1.shul = a.shul
                }
            })
            xuanran()
            jiesuan()
            quan()
        }
        //减
        function jian(id) {
            var a = arr.find(item => item.id == id)
            arr.forEach(item1 => {
                if (item1.id == a.id && item1.shul > 1) {
                    a.shul--
                    item1.shul = a.shul
                }
            })
            xuanran()
            jiesuan()
            quan()
        }
        //总价
        function zongjia(id) {
            var a = arr.findIndex(item => item.id == id)
            arr[a].is = event.target.checked
            jiesuan()
        }
        function jiesuan() {
            var maney = 0
            arr.forEach(item => {
                if (item.is) {
                    maney += item.price * item.shul
                }
            })
            ma.innerHTML = `总价：${maney} 元`
        }
        jiesuan()
        function fanhui() {
            location.assign('./商品列表.html')
        }
    </script>
</body>

</html>